<template>
  <div id="detail">
    <div class="nav" ref="nav">
      <div class="flex">
        <a
          href="javascript:void(0);"
          v-for="(item, index) in navList"
          @click="showDetails(index)"
          :key="index"
          :class="{ active: isClick == index }"
        >
          <span>{{ item.navName }}</span>
        </a>
      </div>
    </div>
    <div class="inner listshow0" v-if="goodsList">
      <div class="img">
        <img :src="goodsList.detailImg" alt="" />
      </div>
      <div class="profile">
        <div class="top">
          <p class="title">{{ goodsList.h1 }}</p>
          <p class="money">￥{{ goodsList.money }}</p>
          <van-icon name="share-o" size=".4rem" @click="showShare = true" />
        </div>
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
        />
        <a href="#" class="wrap">
          <div class="clear-fix">
            <h3>aha会员尊享多重礼遇</h3>
            <h4>开通仅¥99 预计可省¥358</h4>
            <strong>￥99开通</strong>
          </div>
        </a>
        <div class="info">
          <p id="text">已选规格: 2-4人食</p>
        </div>
        <div class="spec">
          <p>{{ goodsList.cake }}</p>
          <p class="sweet">
            <span>甜度</span
            ><img src="../assets/sweetIcons.png" alt="" srcset="" />
          </p>
        </div>
      </div>
      <div class="notice">
        <div class="tips">
          <p>
            温馨提示：上海地区此款蛋糕（2-4人食、5-8人食）当日13:00前预定，最早可于当日17:00配送
          </p>
        </div>
      </div>
      <div class="comment listshow1">
        <div class="comment-swiper">
          <van-swipe :loop="false" :width="240" :show-indicators="false">
            <van-swipe-item>
              <div class="comment-item">
                <h3>
                  <span style="float: left">132***2206</span>
                  <span style="float: right">2021-04-20 23:19:26</span>
                </h3>
                <p>好吃，超好吃！</p>
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="comment-item">
                <h3>
                  <span style="float: left">132***2206</span>
                  <span style="float: right">2021-04-20 23:19:26</span>
                </h3>
                <p>好吃，超好吃！</p>
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="comment-item">
                <h3>
                  <span style="float: left">132***2206</span>
                  <span style="float: right">2021-04-20 23:19:26</span>
                </h3>
                <p>好吃，超好吃！</p>
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="comment-item">
                <h3>
                  <span style="float: left">132***2206</span>
                  <span style="float: right">2021-04-20 23:19:26</span>
                </h3>
                <p>好吃，超好吃！</p>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
        <p>
          <a href="javascript:void(0);"
            ><router-link to="">查看更多评论 ></router-link></a
          >
        </p>
      </div>
      <div class="recommend">
        <img
          src="//lecake.oss-cn-shanghai.aliyuncs.com/topic/group/thirdPlusH5_3.jpg"
          alt=""
        />
      </div>
      <div class="goodsDesc listshow2">
        <div v-for="(imgUrl, index) in goodsList.detail" :key="index">
          <img :src="[imgUrl.detailImgUrl]" alt="" />
        </div>
        <div>
          <img
            src="https://imagecdn.lapetit.cn/postsystem/docroot/images/promotion/202006/无接触配送商详页wap(6).jpg"
            alt=""
          />
        </div>
      </div>
      <div style="margin: 1.08rem"></div>
    </div>
    <div class="footer">
      <div class="footer-nav">
        <a href="javascript:void(0);">
          <router-link to="/">
            <van-icon name="wap-home-o" size=".48rem" />
          </router-link>
        </a>
        <a href="javascript:void(0);">
          <router-link to="">
            <van-icon name="service-o" size=".48rem" />
          </router-link>
        </a>
        <a href="javascript:void(0);" class="badge">
          <router-link to="/shoppingBag">
            <van-icon name="goods-collect-o" size=".48rem" />
          </router-link>
          <van-badge>
            <div class="child" />
            <template #content>
              {{ $store.state.cartNum }}
            </template>
          </van-badge>
        </a>
        <a href="javascript:void(0);" @click="joinCart()">加入购物车</a>
      </div>
    </div>
    <a href="javascript:void(0);" id="btn" v-show="hideBtn" @click="showBtn"
      ><img src="../assets/backTop.png" alt=""
    /></a>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "detail",
  data() {
    return {
      id: 0,
      goodsList: null,
      showShare: false,
      showIndex: null,
      hideBtn: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      navList: [
        {
          navName: "商品",
        },
        {
          navName: "评论",
        },
        {
          navName: "详情",
        },
        {
          navName: "换购",
        },
      ],
      isClick: 0,
      goods: null,
    };
  },
  created() {
    // 获取路由传参
    this.id = this.$route.params.id;
    axios
      .get(
        "https://www.fastmock.site/mock/942dfbb577a74c49a06b657043b1622a/lecake/lecakeHome"
      )
      .then((res) => {
        let tempData = res.data;
        document.title = tempData.data[this.id - 1].title;
        tempData.data.forEach((item) => {
          if (item.id == this.id) {
            this.goodsList = item;
          }
        });
      });
    if (localStorage.getItem("cartList")) {
      this.cartNum = JSON.parse(localStorage.getItem("cartList")).reduce(
        (temp, goods) => temp + goods.num,
        0
      );
    }
  },
  mounted() {
    // 监听页面滚动事件
    window.addEventListener("scroll", this.showSearch);
  },
  methods: {
    // 加入购物车
    joinCart() {
      // 将当前商品信息存入本地存储中
      let cartList = [];
      // 将本地存储中的数据取出，避免旧数据丢失
      if (localStorage.getItem("cartList")) {
        cartList = JSON.parse(localStorage.getItem("cartList"));
      }
      // 便利cartList旧数据，查看是否以及存在该商品，如果存在数量加一，否则直接添加
      let hasGoods = false; // 是否已存在该商品
      cartList.forEach((goods) => {
        if (goods.id == this.goodsList.id) {
          goods.num++;
          hasGoods = true;
        }
      });
      if (!hasGoods) {
        this.goodsList.num = 1; // 初始化商品数量
        this.goodsList.isChecked = true; // 初始化选中状态
        cartList.push(this.goodsList); // 放入购物车
      }
      localStorage.setItem("cartList", JSON.stringify(cartList));

      // 更新状态管理器中cartNum
      this.$store.commit("setCartNum", 1);
    },
    showBtn() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    showSearch() {
      // 获取当前滚动条向下滚动的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const nav = this.$refs.nav;
      // 当页面滚动到高度10px处时，显示搜索框
      if (scrollTop > 10) {
        nav.className = "nav nav-top";
      } else {
        nav.className = "nav";
      }
      if (scrollTop > 300) {
        this.hideBtn = true;
      } else {
        this.hideBtn = false;
      }
    },
    showDetails(num) {
      var el = document.getElementsByClassName(`listshow${num}`)[0];
      if (this.showIndex == num) {
        this.showIndex = null;
      } else {
        this.showIndex = num;
      }
      this.$nextTick(function () {
        window.scrollTo({ behavior: "smooth", top: el.offsetTop });
      });
      this.isClick = num;
    },
  },
};
</script>

<style>
#detail {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 0.14rem;
  background: #f4f4f4;
  color: #3e3e3e;
  position: relative;
  margin: auto;
}
.nav {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  transition: all 0.3s;
  transform: translate3d(0, -100%, 0);
}
.nav-top {
  transform: translate3d(0, 0, 0);
}
.nav .flex {
  border-bottom: 1px solid #9c9c9c;
  height: 100%;
  background: #ffffff;
}
.nav .flex a {
  width: 25%;
  display: inline-block;
  height: 100%;
  position: relative;
  text-align: center;
  color: #3e3e3e;
}
.nav .flex a span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%);
}
.nav .flex .active span::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.03rem;
  background: #3e3e3e;
  z-index: 1;
  left: 0;
  bottom: -0.12rem;
}
.nav .flex a:nth-of-type(4) span::after {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: url("../assets/icons_5.png") no-repeat center;
  background-size: 6rem 6rem;
  top: 50%;
  margin-top: -0.2rem;
  background-position: -1.9rem -0.1rem;
  left: -0.4rem;
}
.inner .img img {
  width: 100%;
  height: 7.5rem;
}
.profile {
  padding: 0.32rem 0.4rem;
  background-color: #fff;
  position: relative;
}
.profile .top {
  text-align: center;
}
.profile .top .title {
  margin: 0;
  font-size: 0.36rem;
  margin-bottom: 0.2rem;
}
.profile .top .money {
  font-size: 0.36rem;
  color: #cea461;
  margin: 0;
}
.profile .top .van-icon {
  position: absolute;
  right: 10%;
  top: 0.7rem;
}
a,
a:hover {
  text-decoration: none;
}
.wrap {
  width: 100%;
  display: inline-block;
  margin-top: 0.24rem;
}
.clear-fix {
  padding: 0.12rem 0.4rem;
  background: #f9f9f9;
  position: relative;
}
.clear-fix::before {
  content: "";
  position: absolute;
  width: 0.04rem;
  height: 100%;
  background: #e8380d;
  z-index: 1;
  left: 0;
  top: 0;
}
.clear-fix h3 {
  font-size: 0.28rem;
  color: #cea461;
  font-weight: normal;
  margin: 0;
}
.clear-fix h4 {
  font-size: 0.22rem;
  color: #3e3e3e;
  font-weight: normal;
  margin: 0;
}
.clear-fix strong {
  position: absolute;
  top: 35%;
  right: 0.28rem;
  color: #cea461;
  font-weight: normal;
  padding: 0 0.32rem;
}
.clear-fix strong::before {
  content: "";
  position: absolute;
  width: 0.02rem;
  height: 100%;
  background: #cea461;
  z-index: 1;
  top: 0;
  left: 0;
}
.clear-fix strong::after {
  content: "";
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  background: url("../assets/icons_5.png") no-repeat center;
  background-size: 6rem 6rem;
  top: 50%;
  margin-top: -0.3rem;
  background-position: -0.6rem 0;
  right: -0.3rem;
}
.info {
  position: relative;
  padding-left: 0.24rem;
  margin-top: 0.32rem;
}
.info #text::before {
  content: "";
  position: absolute;
  width: 0.04rem;
  height: 100%;
  background: #e8380d;
  z-index: 1;
  left: 0;
  top: 0;
}
.info #text::after {
  content: "";
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  background: url("../assets/icons_5.png") no-repeat center;
  background-size: 6rem 6rem;
  top: 50%;
  margin-top: -0.3rem;
  background-position: -1.2rem 0;
  right: 0;
  transition: all 0.5s ease;
  transform: rotate(0);
}
.spec {
  padding-left: 0.24rem;
}
.spec .sweet img {
  height: 0.22rem;
}
.spec .sweet span,
.spec .sweet img {
  vertical-align: middle;
}
.notice {
  width: 100%;
  color: #ff4001;
  position: relative;
  background-color: #fff;
  margin-top: 0.2rem;
}
.notice .tips {
  padding: 0.32rem 0.4rem;
}
.comment {
  margin-top: 0.2rem;
  padding: 0.32rem 0 0.24rem;
  position: relative;
  background-color: #fff;
}
.comment p {
  width: 100%;
  margin-top: 1rem;
  text-align: center;
}
.comment p a {
  color: #3e3e3e;
}
.comment-item {
  display: inline-block;
  padding: 0.2rem;
  vertical-align: top;
  border: 0.02rem solid #d1d1d1;
  border-radius: 3px;
  width: 4rem;
  margin-left: 0.32rem;
}
.comment-item h3 {
  color: #9c9c9c;
  font-weight: inherit;
}
.comment-item h3::after {
  content: " ";
  clear: both;
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
.recommend {
  margin-top: 0.2rem;
}
.recommend img {
  width: 100%;
}
.goodsDesc {
  width: 100%;
  margin-top: 0.2rem;
}
.goodsDesc div img {
  width: 100%;
}
.footer {
  position: fixed;
  height: 1.08rem;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: #ffffff;
  border-top: 0.02rem solid #d1c6af;
}
.footer-nav {
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: stretch;
}
.footer-nav a {
  width: 20%;
  display: block;
  text-align: center;
  padding: 0.16rem 0.3rem;
  color: #3e3e3e;
}
.footer-nav a:nth-of-type(4) {
  width: 40%;
  background-color: #ff4001;
  color: #fff;
  font-size: 0.3rem;
  line-height: 1rem;
  padding: 0;
}
#btn {
  position: fixed;
  bottom: 1.5rem;
  right: 0.2rem;
}
#btn img {
  width: 0.8rem;
  height: 0.8rem;
}
.badge {
  position: relative;
}
.van-badge__wrapper {
  position: absolute;
  top: 0.35rem;
  right: 0.75rem;
  display: inline-block;
}
</style>